<script lang="ts" setup>
  import { queryAllOrder } from '@/services/order';
  import type { MealKindType } from '@/types/mealkind';
  import type { OrderType } from '@/types/order';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  const currentTab = ref(0);
  const doneText = ref('刷新成功');
  const loading = ref(false);
  const pullDownRefresh = ref();

  const onScroll = (event: any) => {
    pullDownRefresh.value?.enableToRefresh(event.detail.scrollTop === 0);
  };
  const onScrolltoupper = () => {
    pullDownRefresh.value?.enableToRefresh(true);
  };
  const tabs = [
    {
      name: '待处理',
      value: 0,
    },
    {
      name: '已下单',
      value: 1,
    },
    {
      name: '已送达',
      value: 2,
    },
    {
      name: '已取消',
      value: -1,
    },
  ];
  const onRefresh = () => {
    loading.value = true;
    getOrdersData(currentTab.value.toString())
      .then(() => {
        doneText.value = '刷新成功';
      })
      .catch(() => {
        doneText.value = '刷新失败';
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const handlePic = (item: OrderType) => {
    const picArr: any[] = [];
    // @ts-ignore
    item.orderText.forEach((elementType: MealKindType) => {
      elementType.meals.forEach((item) => {
        picArr.push({
          id: item.id,
          src: item.mealImage,
        });
      });
    });
    return picArr;
  };

  const handleCon = (item: OrderType) => {
    let orderContext = '';
    // @ts-ignore
    item.orderText.forEach((elementType: MealKindType) => {
      elementType.meals.forEach((item) => {
        orderContext = orderContext + ';' + item.mealName + 'X' + item.number;
      });
    });
    return orderContext.substring(1);
  };

  const orderList = ref<Array<OrderType>>([]);
  const getOrdersData = async (orderType?: string) => {
    console.log(orderType);
    const res = await queryAllOrder(orderType);
    orderList.value = res.data.map((item) => {
      return {
        ...item,
        orderText: JSON.parse(item.orderText as string) as MealKindType[],
      };
    });
  };
  onLoad(() => {
    getOrdersData();
  });
  const change = (e) => {
    currentTab.value = e.index;
    getOrdersData(e.index);
  };
</script>

<template>
  <view>
    <tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change"></tui-tabs>
    <scroll-view
      scroll-y
      class="order-content"
      :throttle="false"
      @scroll="onScroll"
      @scrolltoupper="onScrolltoupper"
    >
      <sar-pull-down-refresh
        :loading="loading"
        ref="pullDownRefresh"
        :done-duration="500"
        @refresh="onRefresh"
      >
        <template #unready="{ progress }">
          <sar-loading size="48rpx" :animated="false" :progress="progress">
            <template #circular>
              <sar-icon family="demo-icons" name="arrow-clockwise"></sar-icon>
            </template>
            下拉刷新
          </sar-loading>
        </template>
        <template #ready>
          <sar-loading size="48rpx" :animated="false">
            <template #circular>
              <sar-icon family="demo-icons" name="arrow-clockwise"></sar-icon>
            </template>
            释放刷新
          </sar-loading>
        </template>
        <template #loading>
          <sar-loading size="48rpx">
            <template #circular>
              <sar-icon family="demo-icons" name="arrow-clockwise"></sar-icon>
            </template>
            加载中...
          </sar-loading>
        </template>
        <template #done>{{ doneText }}</template>
        <view v-for="item in orderList" :key="item.id" class="order-card">
          <sar-card extra="1小时前">
            <template v-slot:title>
              <view class="time">配送时间: {{ item.orderTime }}</view>
            </template>
            <template v-slot:extra>
              <view class="time">一个小时前</view>
            </template>
            <view class="card-body">
              <tui-image-group
                :imageList="handlePic(item)"
                radius="30rpx"
                isGroup
                width="60rpx"
                height="60rpx"
              ></tui-image-group>
              <view class="good">{{ handleCon(item) }}</view>
              <view class="price">￥{{ item.orderPrice }}</view>
            </view>
            <template v-slot:footer>
              <view style="display: flex; justify-content: space-between; align-items: center">
                <view class="time">预订时间:{{ item.createTime }}</view>
                <view class="card-footer">
                  <view class="btn">
                    <tui-button
                      type="primary"
                      width="100rpx"
                      height="50rpx"
                      shape="circle"
                      plain
                      preventClick
                      shadow
                      size="20"
                      >请求处理</tui-button
                    >
                  </view>
                  <view class="btn">
                    <tui-button
                      type="warning"
                      width="100rpx"
                      height="50rpx"
                      shape="circle"
                      plain
                      preventClick
                      shadow
                      size="20"
                      >取消</tui-button
                    >
                  </view>
                </view>
              </view>
            </template>
          </sar-card>
        </view>
      </sar-pull-down-refresh>
    </scroll-view>
    <tabbar />
  </view>
</template>

<style lang="scss">
  page {
    background-image: url(http://113.45.143.73:9050/meal-images/2024-11/13/b70765e9-8671-4de7-956f-8fa894befbf8.png);
    background-size: 100% 100%;
  }

  .order-content {
    height: 80vh;

    .order-card {
      margin-bottom: 10rpx !important;

      .time,
      .extra {
        font-size: 25rpx;
        color: gray;
      }

      .card-body {
        height: 120rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;

        .good {
          margin-left: auto;
          font-size: 25rpx;
        }

        .price {
          margin-left: auto;
          color: red;
        }
      }
      .card-footer {
        border-top: 1rpx solid #f8f8f8;
        padding: 0 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .btn {
          margin: 0 5rpx;
        }
      }
    }
  }
</style>
